<template>
  <div style="width: 100%; height: 100%">
    <div style="text-align: center">
      <span>box框</span>
      <div>vue</div>
    </div>
    <div style="margin-top:20px; width: 200px;height: 100px; display: inline-block">
      <box>
        <template slot="content">
          <div style="text-align:center; line-height: 80px">
            html内容
          </div>
        </template>
      </box>
    </div>

    <div style="display: inline-block; margin-top: 20px;width: 200px; height: 300px;">
      <box
        :showTitle="true"
        :leftTitle="'left表题'"
        :titleFontColor="'black'"
        :rightTitle="'right表题'"
      >
        <template slot="content">
          <div style="text-align:center; line-height: 100px;">
            html内容
          </div>
        </template>
      </box>
    </div>

    <div style="display: inline-block; margin-top: 20px;width: 200px; height: 300px;">
      <box
        :showTitle="true"
        :leftTitle="'left表题'"
        :titleFontColor="'black'"
        :rightTitle="'right表题'"
        :titleBg="'white'"
        :contentBg="'black'"
      >
        <template slot="content">
          <div style="text-align:center; line-height: 100px; color: white">
            html内容
          </div>
        </template>
      </box>
    </div>

    <div style="display: inline-block; margin-top: 20px;width: 200px; height: 300px;">
      <box
        :showTitle="true"
        :leftTitle="'left表题'"
        :titleFontColor="'black'"
        :rightTitle="'right表题'"
        :titleBg="'white'"
      >
        <template slot="content">
          <div style="text-align:center; line-height: 100px; color: white; height: 500px">
            html内容
          </div>
        </template>
      </box>
    </div>

  </div>
</template>
<script>
import box from './components'
export default {
  components: {box},
  data () {
    return {}
  }
}
</script>
<style scoped>

</style>
